<!--


Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

-->

<div id="header" class="container">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <span class="logo pull-left"></span>
        <a class="navbar-brand" ui-sref="trafficPortal.public.home.landing">{{properties.name}}</a>
    </div>
    <div uib-collapse="isCollapsed" class="collapse navbar-collapse no-transition">
        <ul class="nav navbar-nav navbar-right top-navbar">
            <li class="navbar-dropdown navbar-dropdown-left dropdown">
                <div class="btn-group" uib-dropdown is-open="helpMenu.isopen">
                    <button id="helpMenu-button" type="button" class="btn btn-link" uib-dropdown-toggle>Help <i class="fa fa-angle-down fa-lg"></i></button>
                    <ul class="uib-dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="helpMenu-button">
                        <li ng-if="properties.about.show"><a ng-click="about()">About {{properties.name}}</a></li>
                        <li><a ng-click="releaseVersion()">Release Information</a></li>
                    </ul>
                </div>
            </li>
            <li ng-show="!user.loaded && !isState('trafficPortal.public.home.landing')" class="navbar-btn">
                <button type="button" class="btn btn-link" ng-click="navigateToState('trafficPortal.public.home.landing', false)">Login</button>
            </li>
            <li ng-show="user.loaded" class="navbar-dropdown navbar-dropdown-left dropdown">
                <div class="btn-group" uib-dropdown is-open="userMenu.isopen">
                    <button id="userMenu-button" type="button" class="btn btn-link" uib-dropdown-toggle>
                        <span id="headerUsername" ng-show="!user.newUser">{{user.username}}</span><span ng-show="user.newUser">New User</span> <i class="fa fa-angle-down fa-lg"></i>
                    </button>
                    <ul class="uib-dropdown-menu" role="menu" aria-labelledby="userMenu-button">
                        <li ng-show="user.localUser"><a ui-sref="trafficPortal.private.user.edit">Manage User Profile</a></li>
                        <li><a ng-click="logout()">Sign Out</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <hr ng-show="user.loaded" class="nav-divider">
    <div uib-collapse="isCollapsed" class="collapse navbar-collapse no-transition">
        <ul ng-show="user.loaded" class="nav navbar-nav sub-navbar navbar-left">
            <li><button type="button" class="btn btn-link" ng-class="{'selected': isState('trafficPortal.private.dashboard.overview')}" ng-click="navigateToState('trafficPortal.private.dashboard.overview', false)">Dashboard</button></li>
            <li class="sub-navbar-dropdown sub-navbar-dropdown-right dropdown">
                <div class="btn-group" uib-dropdown is-open="dsMenu.isopen">
                    <button id="dsMenu-button" type="button" class="btn btn-link" ng-class="{'selected': isState('trafficPortal.private.deliveryService')}" uib-dropdown-toggle>
                        Delivery Services <i class="fa fa-angle-down fa-lg"></i>
                    </button>
                    <ul id="scrollable-ds-nav-menu" class="uib-dropdown-menu scrollable" role="menu" aria-labelledby="dsMenu-button">
                        <li ng-if="properties.deliveryService.request.show"><a class="ds-name-link" title="New Delivery Service" ng-click="navigateToState('trafficPortal.private.deliveryService.new', true)"><i class="fa fa-plus fa-fw"></i> New Delivery Service</a> </li>
                        <li ng-if="properties.deliveryService.request.show && deliveryServices.length > 0" class="divider"></li>
                        <li ng-repeat="ds in deliveryServices | orderBy:'displayName'"><a class="ds-name-link" title="{{ds.displayName}} ({{ds.id}} | {{ds.xmlId}})" ng-click="showDS(ds.id)"><i class="fa fa-times fa-fw" title="Inactive" ng-show="!ds.active"></i><i class="fa fa-check fa-fw" title="Active" ng-show="ds.active"></i> {{ds.displayName}}</a></li>
                    </ul>
                </div>
            </li>
            <li><button type="button" class="btn btn-link" ng-class="{'selected': isState('trafficPortal.private.collateral')}" ng-click="navigateToState('trafficPortal.private.collateral', false)">Collateral</button></li>
        </ul>
    </div>
</div>
